<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 顶部导航栏 -->
    <header class="bg-white dark:bg-gray-800 shadow-md">
      <div class="container mx-auto px-4 py-6 flex justify-between items-center">
        <div class="flex items-center space-x-4">
          <i class="fas fa-clipboard-check text-2xl text-blue-600"></i>
          <h1 class="text-2xl font-bold text-gray-800 dark:text-white">待办清单</h1>
        </div>
        
        <!-- 导航链接 -->
        <nav class="flex space-x-4">
          <router-link 
            to="/home" 
            class="px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            v-if="isLoggedIn"
          >
            主页
          </router-link>
          <router-link 
            to="/all-tasks" 
            class="px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
            v-if="isLoggedIn"
          >
            总事项
          </router-link>
          <router-link 
            to="/about" 
            class="px-3 py-2 text-sm font-medium rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          >
            关于
          </router-link>
        </nav>
        
        <div class="flex items-center space-x-4">
          <!-- 暗黑模式切换 -->
          <button
            @click="toggleDarkMode"
            class="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <i class="fas fa-moon" v-show="!isDarkMode"></i>
            <i class="fas fa-sun" v-show="isDarkMode"></i>
          </button>
          
          <!-- 根据登录状态显示不同按钮 -->
          <div v-if="isLoggedIn" class="flex items-center">
            <span class="mr-2 text-sm text-gray-600 dark:text-gray-300">
              欢迎, {{ userStore.currentUser?.username || '用户' }}
            </span>
            <button
              @click="logout"
              class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors"
            >
              退出登录
            </button>
          </div>
          <div v-else class="flex items-center">
            <router-link 
              to="/login" 
              class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
            >
              登录
            </router-link>
            <router-link 
              to="/register" 
              class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors ml-2"
            >
              注册
            </router-link>
          </div>
        </div>
      </div>
    </header>

    <!-- 路由出口 -->
    <router-view />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from './userStore';

const router = useRouter();
const userStore = useUserStore();

const isDarkMode = ref(false);
const isLoggedIn = computed(() => !!userStore.currentUser);

const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
};

const logout = () => {
  userStore.logout();
  router.push('/start');
};
</script>

<style scoped>
/* 样式 */
</style>